<template>
  <div>
      <div class="search-con search-con-top">

          用户手机号：
          <Input v-model="searchData.mobile" style="width: 150px"></Input>
          提现状态：
          <Select style="width:100px" v-model="searchData.status">
              <Option value="0">待转账</Option>
              <Option value="1">已打款</Option>
              <Option value="2">已拒绝</Option>
          </Select>
          提现方式：
          <Select style="width:100px" v-model="searchData.type">
              <Option value="1">微信</Option>
              <Option value="2">支付宝</Option>
              <Option value="3">银行卡</Option>
          </Select>
          提现时间：
          <Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 250px"
              v-model="searchData.create_time"></Date-picker>
          <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
          <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
      </div>
      <br>
      <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" border
          stripe>

          <template slot-scope="{ row , index}" slot="statusSlot">
              <span v-if="row.status == 0">待转账</span>
              <span v-if="row.status == 1" style="color: blue;">已打款</span>
              <span v-if="row.status == 2" style="color: red;">已拒绝</span><br />
              <span v-if="row.status == 2" style="color: red;">{{ row.reason }}</span>
          </template>
          <template slot-scope="{ row , index}" slot="makeSlot">
              <Button type="primary" size="small" @click="pass(row.id)" v-show="row.status == 0">通过</Button>
              <Button type="error" style="margin-left: 10px;" size="small" @click="showModal(row.id)"
                  v-show="row.status == 0">拒绝</Button>
          </template>
      </Table>
      <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize"></Paginate>
      <Modal v-model="showAdd" title="提现审核" @on-ok="audit">
          请输入拒绝理由：
          <Input v-model="reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入..."></Input>

      </Modal>


  </div>
</template>

<script>

import Paginate from "_c/paginate";
import ShowImg from '_c/show_img'

export default {
  name: "coachWithdrawList",
  components: {
      Paginate, ShowImg
  },
  data() {
      return {
          // 列表
          columns: [
              {
                  title: '名称',
                  align: "center",
                  key: 'username',
              },
              {
                  title: '手机号',
                  align: "center",
                  key: 'mobile',
                  maxWidth: 130,
              },
              {
                  title: '提现金额',
                  align: "center",
                  key: 'money',
              },
              // {
              //     title: '手续费',
              //     align: "center",
              //     key: 'rate',
              // },

              {
                  title: '状态',
                  align: "center",
                  slot: 'statusSlot',
                  key: 'status',
              },
              {
                  title: '提现时间',
                  align: "center",
                  key: 'create_time',
              },

              {
                  title: '操作',
                  align: "center",
                  slot: 'makeSlot',
                  maxWidth: 200,
              },
          ],
          // 数据
          list: [],
          total: 0,
          searchData: {
              page: 1,
              limit: 10,
          },
          showAdd: false,
          reason: '',
          id: 0,
          showPaymentInfo: false,
          paymentInfo: {},
      }
  },
  methods: {
      getList() {
          const param = {
              ...this.searchData
          };
          this.$axios('/admin/coachWithdraw/getList', param).then(res => {
              this.list = res.data;
              this.total = res.total;
          });
      },
      search() {
          this.searchData.page = 1;
          this.getList();
      },
      reset() {
          this.searchData = {
              page: 1,
              limit: 10,
          };
          this.getList();
      },
      changePage(page) {
          this.searchData.page = page;
          this.getList();
      },
      changeSize(size) {
          this.searchData.limit = size;
          this.getList();
      },
      customSort(column, key, order) {
          this.searchData.order_by = column.key;
          this.searchData.sort = column.order;
          this.getList();
      },
      // 显示添加角色弹窗
      showModal(id, type) {
          this.reason = '';
          this.showAdd = true;
          this.id = id
      },
      audit() {
          this.$axios('/admin/coachWithdraw/audit', { id: this.id, status: 2, reason: this.reason }).then(res => {
              this.$Message.success('审核成功');
              this.getList();
          })
      },
      // 添加角色
      pass(id) {
          this.$Modal.confirm({
              title: '确认',
              content: "<p>您确定执行该操作吗？</p>",
              onOk: () => {
                  this.$axios('/admin/coachWithdraw/audit', { id: id, status: 1 }).then(res => {
                      this.$Message.success('执行成功');
                      this.getList();
                  });
              },
              onCancel: () => {
                  this.$Message.info('取消操作');
              }
          });
      },
      //
      showPaymentInfoDao(src) {
          this.showPaymentInfo = true;
          this.paymentInfo.src = src;
      },
  },
  created() {
      // 查询自己管理员
      this.getList();
  }
}
</script>

<style>
.inputMaxWidth {
  max-width: 180px;
  margin-left: 10px;
}
</style>
